<template>
    <div class="home_page">
      <!-- 轮播图区域 -->
      <el-carousel :interval="4000" type="card" height="400px">
        <el-carousel-item v-for="(url, index) in img" :key="index">
          <img :src="url" alt="carousel image" class="carousel-image" />
        </el-carousel-item>
      </el-carousel>
  
      <!-- 功能介绍区域 -->
      <div class="features">
        <h2>功能简介</h2>
        <div class="feature-list">
          <div class="feature-item" v-for="feature in features" :key="feature.title">
            <h3>{{ feature.title }}</h3>
            <el-divider style="width: 50%; border-color: black;  border-width: 3px; border-radius: 10px;" />
            <p>{{ feature.description }}</p>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import img1 from '@/assets/home_img/imgtoimg1.png';
  import img2 from '@/assets/home_img/texttoimg1.png';
  import img3 from '@/assets/home_img/imgtoimg2.png';
  import img4 from '@/assets/home_img/texttoimg2.png';
  
  const img = [img1, img2, img3, img4];
  
  const features = [
    {
      title: '文生图 (Text-to-Image)',
      description:
        '文生图是一种基于人工智能的图像生成技术，只需输入一段文字描述，系统即可生成与之匹配的高质量图像。',
    },
    {
      title: '图生图 (Image-to-Image)',
      description:
        '图生图技术允许用户上传一张图片，并通过调整或附加描述生成风格化或变体的图像，例如添加细节或改变画风。',
    },
  ];
  </script>
  
  <style lang="css" scoped>
  .home_page {
    width: 90%;
    margin: 0 auto;
    padding: 20px 0;
    font-family: 'Arial', sans-serif;
    color: #333;
  }
  
  /* 轮播图样式 */
  .carousel-image {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s;
  }
  
  .carousel-image:hover {
    transform: scale(1.05);
  }
  
  /* 功能介绍区域样式 */
  .features {
    margin-top: 30px;
    padding: 30px;
    background: #f4f6f8;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  }
  
  .features h2 {
    text-align: center;
    color: #2c3e50;
    font-size: 2em;
    margin-bottom: 20px;
  }
  
  .feature-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
  }
  
  .feature-item {
    background: #ffffff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s;
  }
  
  .feature-item:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  }
  
  .feature-item h3 {
    color: #34495e;
    font-size: 1.6em;
    margin-bottom: 10px;
  }
  
  .feature-item p {
    color: #7f8c8d;
    font-size: 1em;
    line-height: 1.8;
  }
  </style>
  